---
permalink: /thumb/
---
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title> Test </title>
  <meta name="viewport" content="width=device-width, minimum-scale=1.0">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
  <link href="{{ site.baseurl }}/default/bulmaswatch.min.css" id="stylesheet" rel="stylesheet" type="text/css" />
  <style type="text/css">
  .switcher {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 5;
  }
  .nav h1 {
    font-weight: bold;
  }

  .navbar-start, .navbar-item {
    display: flex;
  }

  .navbar-item {
    align-items: center;
  }
  </style>
</head>

<body>
  <section class="hero is-fullheight">
    <div class="hero-head">
      <nav class="navbar">
        <div class="container">
          <div class="navbar-start">
            <h1 class="navbar-item" id="title"> Hero title </h1>
            <a class="navbar-item is-active">Home</a>
            <a class="navbar-item">Features</a>
            <span class="navbar-item">
              <button class="button" type="button" id="open-preview">Preview</button>
            </span>
          </div>
        </div>
      </nav>
    </div>
    <div class="hero-body">
      <div class="container has-text-centered">
        <a class="button">Button</a>
        <a class="button is-primary">Primary</a>
        <a class="button is-info">Info</a>
        <a class="button is-link">Link</a>
        <br class="is-hidden-tablet">
        <br class="is-hidden-tablet">
        <a class="button is-success">Success</a>
        <a class="button is-warning">Warning</a>
        <a class="button is-danger">Danger</a>
      </div>
    </div>
  </section>
  <div class="switcher select is-hidden-mobile">
    <select>
      <option value="default" selected="">Default</option>
      <option disabled>───</option>
      {% for t in site.themes %}
        <option value="{{ t.name | slugify }}">{{ loop.index }} {{ t.name }} </option>
      {% endfor %}
    </select>
  </div>
  <script crossorigin="anonymous" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" src="//code.jquery.com/jquery-3.1.1.min.js">
  </script>
  <script type="text/javascript">
  function switchTheme(t) {
    var theme = t || 'default';
    $('#stylesheet').attr('href', '../' + theme + '/bulmaswatch.min.css');
    var title = theme.charAt(0).toUpperCase() + theme.substring(1);
    window.history.replaceState(theme, title, '?' + theme);
    $('#title').text(title);
    $('#subtitle').text(title);
    document.title = title;
  }
  $(function() {
    $('.switcher select').change(function(e) {
      switchTheme(e.target.value);
    });
    if (window.location.search) {
      $('.switcher select').val(window.location.search.substring(1));
      $('.switcher select').trigger('change');
    }
    $('.modal-background, .modal-close').click(function() {
      $(this).parent().removeClass('is-active');
    });
    $('#open-preview').on('click', function(e) {
      window.top.location.href = '{{ site.baseurl }}/' + window.location.search.substring(1);
    });
  });
  </script>
</body>

</html>
